<template>
	<view style="background: #F4F6FA;height: 93.3vh;">
		<view class="top"></view>
		<view class="bottom">
			<view class="firstContent">
				<view class="contentTitle">我的服务</view>
				<view style="display: flex;justify-content: space-around;align-items: center;">
					<view>
						<view class="imgContent" @tap="toFeedback">
							<image src="@/static/img/yjfk.png" style="width:15vw;height: 15vw;"></image>
							<text class="imgText">意见反馈</text>
						</view>
					</view>
					<view>
						<view class="imgContent" @tap="skipHelpGroup">
							<image src="@/static/img/zxkf.png" style="width:15vw;height: 15vw;"></image>
							<text class="imgText">在线客服</text>
						</view>
					</view>
					<view>
						<view class="imgContent" @tap="goPhone">
							<image src="@/static/img/dhkf.png" style="width:15vw;height: 15vw;"></image>
							<text class="imgText">电话客服</text>
						</view>
					</view>
				</view>
			</view>
			<view class="twoContent">
				<view class="contentTitle">常见问题</view>
				<view v-for="item,index in listData">
					<view class="listItem" @tap="skipFrequently(item.id)">
						<view style="display: flex;align-items: center;">
							<text class="textItem">{{item.question}}</text>
						</view>
						<uni-icons type="right" size="25"></uni-icons>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue"
	import {loginCheck } from '@/utils/api/userInfo.ts'
	import { getServiceImId } from '@/utils/api/index.ts'
	const listData = ref([
		{ id: "1", question: '账户相关' },
		{ id: "2", question: '功能使用' },
		{ id: "3", question: '支付安全' },
		{ id: "4", question: '其他' },
	])

	const skipHelpGroup = () => {
		loginCheck().then(r => {
			getServiceImId().then(res => {
				const conversationID = `C2C${res.data}`;
				uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${res.data}` });
			})
		})
	}
	const toFeedback = () => {
		uni.navigateTo({
			url: '/pages/my/suggestion'
		})
	}
	const goPhone = ()=>{
		uni.makePhoneCall({
		    phoneNumber: '4009949186', // 电话号码
		    success: function (e) {
		      console.log('拨号成功',e);
			  plus.device.dial('4009949186',true)
		    },
		    fail: function () {
		      console.log('拨号失败');
		    }
		  });
	}

	const skipFrequently = (id : string) => {
		uni.navigateTo({
			url: `/pages/my/frequentlyAskedQuestion?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.top {
		background: url("@/static/img/bangzhubj.png");
		background-size: cover;
		padding-top: var(--status-bar-height);
		/* 或者使用 contain */
		background-position: center;
		background-repeat: no-repeat;
		width: 100vw;
		height: 30vw;
		position: relative;
	}

	.bottom {
		width: 100vw;
		height: 76.5vh;
		position: relative;
		background-color: #F4F6FA;
		;
	}

	.firstContent {
		position: absolute;
		top: -18vw;
		left: 3vw;
		width: 702rpx;
		height: 258rpx;
		background: #FFFFFF;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		Z-index: 9999;
		padding: 32rpx 24rpx;
	}

	.contentTitle {
		font-size: 32rpx;
		color: #262626;
		font-weight: 700;
		margin-bottom: 2vw;
	}

	.imgContent {
		border: 2px dashed #262626;
		width: 15.5vw;
		height: 15.5vw;
	}

	.imgText {
		font-size: 27rpx;
		color: #262626;
	}

	.twoContent {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: absolute;
		top: 25vw;
		left: 3vw;
		padding: 24rpx;
	}

	.listItem {
		padding: 1vh;
		margin: 3vw 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #f7f7f7;
	}

	:deep(.uni-page-head__title) {
		color: #fff;
		font-weight: 500;
	}
</style>